<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>探讨探讨</title>
    <!--    引入BS 的css库-->
    <link rel="stylesheet" href="/webjars/bootstrap/3.4.1/css/bootstrap.min.css">
    <!--    引入BC的js库-->
    <script src="/webjars/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!--    引入jq 的库-->
    <script src="/webjars/jquery/3.6.1/jquery.min.js"></script>
<!--</head>-->
<!--<body>-->
<!--<div class="container">-->
<!--    <div class="panel panel-primary">-->
<!--        <div class="panel-heading">-->
<!--            <h3 class="panel-title">-->
<!--                <h3>SpringBoot + Thymeleaf+Bs）</h3>-->
<!--            </h3>-->
<!--        </div>-->
<!--        <table class="table table-hover table-striped">-->
<!--            <tr>-->
<!--                <td class="active">>学号</td>-->
<!--                <td class="success">姓名</td>-->
<!--                <td class="warning">性别</td>-->
<!--                <td class="danger">年龄</td>-->
<!--                <td class="info">住址</td>-->
<!--                <td class="success">所在班级</td>-->
<!--                <td class="danger">操作</td>-->
<!--            </tr>-->
<!--            &lt;!&ndash;/*@thymesVar id="students" type="com"*/&ndash;&gt;-->
<!--            <tr th:each="stud : ${list}">-->
<!--                <td class="info" >[[${stud.sid}]]</td>-->
<!--                &lt;!&ndash;/*@thymesVar id="sname" type=""*/&ndash;&gt;-->
<!--                <td class="active" th:text="${stud.sname}"></td>-->
<!--                <td class="success" th:text="${stud.sex}"></td>-->
<!--                <td class="warning" th:text="${stud.age}"></td>-->
<!--                <td class="danger" th:text="${stud.addr}"></td>-->
<!--                <td class="info" th:text="${stud.cname}"></td>-->
<!--                <td>-->
<!--                    <a href="#" class="btn btn-info btn-sm">修改</a>-->
<!--                    <a href="#" class="btn btn-danger btn-sm">删除</a>-->
<!--                </td>-->
<!--            </tr>-->
<!--        </table>-->
<!--        <div class="panel-footer text-right">-->
<!--            &lt;!&ndash;1. 条件查询&ndash;&gt;-->
<!--            <form class="form-inline" style="float: left" action="/student/search" method="post" name="form1">-->
<!--                <input type="hidden" id="page" name="page">-->
<!--                <div class="form-group">-->
<!--                    <input type="text" th:value="${stud?.sname}" class="form-control" name="sname" placeholder="输入用户名">-->
<!--                </div>-->
<!--                <div class="form-group">-->
<!--                    <input type="text" th:value="${stud?.addr}"  class="form-control" name="addr" placeholder="输入住址">-->
<!--                </div>-->
<!--                <select class="form-control" name="cid">-->
<!--                    <option value="0">所有班级</option>-->
<!--                    <option th:each="c : ${classes}" th:value="${c.cid}" th:selected="${c.cid==stud?.cid}">[[${c.cname}]]</option>-->
<!--                </select>-->
<!--                <button type="submit" class="btn btn-default btn-sm">查询</button>-->
<!--                <button type="button" class="btn btn-success btn-sm" onclick="addUI()">添加学生</button>-->
<!--            </form>-->
<!--            &lt;!&ndash;2. 分页导航&ndash;&gt;-->
<!--            <nav aria-label="Page navigation" >-->
<!--                <ul class="pagination">-->
<!--                    <li id="first">-->
<!--                        <a href="#" aria-label="Previous">-->
<!--                            <span aria-hidden="true">&laquo;</span>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                    &lt;!&ndash;下面的语法可以直接遍历数字&ndash;&gt;-->
<!--&lt;!&ndash;                    <li th:each="p : ${#numbers.sequence(1, pr.totalPage)}" th:class="${p == pr.page ? 'active':''}">&ndash;&gt;-->
<!--&lt;!&ndash;                        <a href="#" th:onclick="skipPage([[${p}]])">[[${p}]]</a>&ndash;&gt;-->
<!--&lt;!&ndash;                    </li>&ndash;&gt;-->
<!--                    <li>-->
<!--                        <a href="#" aria-label="Next">-->
<!--                            <span aria-hidden="true">&raquo;</span>-->
<!--                        </a>-->
<!--                    </li>-->
<!--                </ul>-->
<!--            </nav>-->
<!--            百年智2022.-->
<!--        </div>-->
<!--    </div>-->

<!--    &lt;!&ndash; 模态框 &ndash;&gt;-->
<!--    <div class="modal fade" id="myModal" >-->
<!--        <div class="modal-dialog" role="document">-->
<!--            <div class="modal-content">-->
<!--                <div class="modal-header">-->
<!--                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>-->
<!--                    <h4 class="modal-title" id="title">添加学生</h4>-->
<!--                </div>-->
<!--                <div class="modal-body">-->
<!--                    <form class="form-horizontal" name="form2" action="/student/add" method="post">-->
<!--                        <input type="hidden" name="sid" id="sid">-->
<!--                        <div class="form-group">-->
<!--                            <label class="col-sm-2 control-label">学生姓名:</label>-->
<!--                            <div class="col-sm-10">-->
<!--                                <input type="text" class="form-control" name="sname" id="sname" placeholder="请输入姓名">-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="form-group">-->
<!--                            <label class="col-sm-2 control-label">学生性别:</label>-->
<!--                            <div class="col-sm-10">-->
<!--                                <div class="radio">-->
<!--                                    <label>-->
<!--                                        <input type="radio" name="sex" id="sex1" value="男" >男-->
<!--                                    </label>-->
<!--                                    <label>-->
<!--                                        <input type="radio" name="sex" id="sex2" value="女" >女-->
<!--                                    </label>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="form-group">-->
<!--                            <label class="col-sm-2 control-label">学生年龄:</label>-->
<!--                            <div class="col-sm-10">-->
<!--                                <input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄">-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="form-group">-->
<!--                            <label class="col-sm-2 control-label">学生住址:</label>-->
<!--                            <div class="col-sm-10">-->
<!--                                <input type="text" class="form-control" id="addr" name="addr" placeholder="请输入住址">-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="form-group">-->
<!--                            <label class="col-sm-2 control-label">所在班级:</label>-->
<!--                            <div class="col-sm-10">-->
<!--                                <select class="form-control" name="cid" id="cid">-->
<!--                                    <option value="0">所有班级</option>-->
<!--                                    <option th:each="c : ${classes}" th:value="${c.cid}">[[${c.cname}]]</option>-->
<!--                                </select>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </form>-->
<!--                </div>-->
<!--                <div class="modal-footer">-->
<!--                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>-->
<!--                    <button type="button" class="btn btn-primary" onclick="save()">保存</button>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
<!--</body>-->
<!--</html>-->
<!--<script>-->
<!--    // <li><a href="#">1</a></li>-->
<!--    // $(function(){-->
<!--    //     // createNav();-->
<!--    // })-->
<!--    //1. 添加学生（显示对话框）-->
<!--    // function addUI(){-->
<!--    //     //1.1 修改对话框的标题-->
<!--    //     $("#title").html("添加学生")-->
<!--    //     //1.2 显示对话框-->
<!--    //     $('#myModal').modal('show')-->
<!--    //     //1.3 清空表单-->
<!--    //     document.forms[1].reset()-->
<!--    // }-->
<!--    // //2. 修改学生界面-->
<!--    // function updateUI(stud){-->
<!--    //     console.log("stud-&ndash;&gt;",stud)-->
<!--    //     //2.1 为表单元素赋值-->
<!--    //     $("#sname").val(stud.sname)-->
<!--    //     $("#age").val(stud.age)-->
<!--    //     $("#addr").val(stud.addr)-->
<!--    //     $("#cid").val(stud.cid)-->
<!--    //     $("#sex1").prop("checked",stud.sex == '男' ? true : '')-->
<!--    //     $("#sex2").prop("checked",stud.sex == '女' ? true : '')-->
<!--    //     $("#sid").val(stud.sid)             // 为隐藏域赋值，是判断修改还是添加的重要关键点？-->
<!--    //     //2.2 修改对话框标题-->
<!--    //     $("#title").html("修改学生")-->
<!--    //     //2.3 显示对话框-->
<!--    //     $("#myModal").modal("show")-->
<!--    // }-->
<!--    // //3. 保存学生-->
<!--    // function save(){-->
<!--    //     //3.1 根据sid是否有值，确定url地址，-->
<!--    //     let url = "/student/add"-->
<!--    //     if($("#sid").val()){-->
<!--    //         url = "/student/update"-->
<!--    //     }-->
<!--    //     //3.2 修改表单的action值-->
<!--    //     document.forms[1].action = url;-->
<!--    //     //3.3 提交表单-->
<!--    //     document.forms[1].submit()-->
<!--    // }-->
<!--    //4. 点击分页按钮跳转到某一页上-->
<!--    function skipPage(page) {-->
<!--        $("#page").val(page);-->
<!--        document.form1.submit();-->
<!--    }-->
<!--</script>-->
    <style>
        .table{
            text-align: center;
        }
        .container{
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">
                <h3>学生列表（SpringDataJpa + SpringBoot + Thymeleaf）</h3>
            </h3>
        </div>
        <table class="table table-hover table-striped">
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>年龄</td>
                <td>住址</td>
                <td>所在班级</td>
                <td>操作</td>
            </tr>
            <tr th:each="stud : ${pr.rows}">
                <td>[[${stud.sid}]]</td>
                <td th:text="${stud.sname}"></td>
                <td th:text="${stud.sex}"></td>
                <td th:text="${stud.age}"></td>
                <td th:text="${stud.addr}"></td>
                <td th:text="${stud.cname}"></td>
                <td>
                    <a href="#" class="btn btn-info btn-sm" th:onclick="updateUI([[${stud}]])">修改</a>
                    <a th:href="'/student/delete/'+${stud.sid}"  onclick="return confirm('你真的要删除吗？')" class="btn btn-danger btn-sm">删除</a>
                </td>
            </tr>
        </table>
        <div class="panel-footer text-right">
            <!--1. 条件查询-->
            <form class="form-inline" style="float: left" action="/student/search" method="post" name="form1">
                <input type="hidden" id="page" name="page">
                <div class="form-group">
                    <input type="text" th:value="${stud?.sname}" class="form-control" name="sname" placeholder="输入用户名">
                </div>
                <div class="form-group">
                    <input type="text" th:value="${stud?.addr}"  class="form-control" name="addr" placeholder="输入住址">
                </div>
                <select class="form-control" name="cid">
                    <option value="0">所有班级</option>
                    <option th:each="c : ${classes}" th:value="${c.cid}" th:selected="${c.cid==stud?.cid}">[[${c.cname}]]</option>
                </select>
                <button type="submit" class="btn btn-default btn-sm">查询</button>
                <button type="button" class="btn btn-success btn-sm" onclick="addUI()">添加学生</button>
            </form>
            <!--2. 分页导航-->
            <nav aria-label="Page navigation" >
                <ul class="pagination">
                    <li id="first">
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <!--下面的语法可以直接遍历数字-->
                    <li th:each="p : ${#numbers.sequence(1, pr.totalPage)}" th:class="${p == pr.page ? 'active':''}">
                        <a href="#" th:onclick="skipPage([[${p}]])">[[${p}]]</a>
                    </li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
            百年智2022.
        </div>
    </div>

    <!-- 模态框 -->
    <div class="modal fade" id="myModal" >
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="title">添加学生</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" name="form2" action="/student/add" method="post">
                        <input type="hidden" name="sid" id="sid">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">学生姓名:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="sname" id="sname" placeholder="请输入姓名">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">学生性别:</label>
                            <div class="col-sm-10">
                                <div class="radio">
                                    <label>
                                        <input type="radio" name="sex" id="sex1" value="男" >男
                                    </label>
                                    <label>
                                        <input type="radio" name="sex" id="sex2" value="女" >女
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">学生年龄:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="age" name="age" placeholder="请输入年龄">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">学生住址:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="addr" name="addr" placeholder="请输入住址">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">所在班级:</label>
                            <div class="col-sm-10">
                                <select class="form-control" name="cid" id="cid">
                                    <option value="0">所有班级</option>
                                    <option th:each="c : ${classes}" th:value="${c.cid}">[[${c.cname}]]</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script>
    //1. 添加学生
    function addUI() {
        $("#title").html("添加学生")
        $("#myModal").modal("show")
        document.form2.reset();
    }
    //2. 修改学生
    function updateUI(stud) {
        $("#title").html("修改学生")
        $("#myModal").modal("show")
        $("#sname").val(stud.sname)
        $("#age").val(stud.age)
        $("#addr").val(stud.addr)
        $("#cid").val(stud.cid)
        $("#sid").val(stud.sid)
        $("#sex1").prop("checked",stud.sex == '男' ? true : '')
        $("#sex2").prop("checked",stud.sex == '女' ? true : '')
    }
    //3. 保存学生
    function save(){
        //3.1 修改表单action的值
        if($("#sid").val()){
            document.form2.action = "/student/update"
        }
        //3.2 提交表单
        document.form2.submit();

    }
    //4. 点击分页按钮跳转到某一页上
    function skipPage(page) {
        $("#page").val(page);
        document.form1.submit();
    }

</script>